<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
	window.onload=function(){
		
	}
window.onscroll=function ()
{		
	var oDiv=document.getElementById('div1');
	console.log(oDiv.offsetTop);
	
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	
	//oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
	
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		console.log(oDiv.offsetTop);
		var speed=(iTarget-oDiv.offsetTop)/4;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
//		console.log(speed);
	
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			document.title=iTarget;
			document.getElementById('txt1').value=oDiv.offsetTop;
			oDiv.style.top=oDiv.offsetTop+speed+'px';
		}
	}, 30);
}
</script>
</head>

<body style="height:2000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>
</html>
